<template>
  <div>
    <DataHead />
    <a-card class="mt-4" :body-style="{ paddingTop: '0' }">
      <a-list
        :loading="table.loading"
        :data-source="table.data"
        :grid="{ gutter: 12, column: 6, xs: 6, sm: 4, md: 3, lg: 4, xl: 6 }"
        :pagination="{
          pageSize: query.pageSize,
          current: query.pageNum,
          total: query.total,
          position: 'top',
          onChange,
        }"
      >
        <template #renderItem="{ item }">
          <div class="p-2 text-center m-2 flex flex-col relative">
            <div class="absolute z-10 right-0 top-0">
              <a-checkbox @change="onCheck(item.resId)"></a-checkbox>
            </div>
            <File
              @on-delete="remove(item.resId)"
              @on-edit="edit(item.resId)"
              actions
              :item="item"
            ></File>
          </div>
        </template>
      </a-list>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { query, table } from '../data/data';
import { edit, list, remove } from '../data/curd';
import DataHead from './data-head.vue';

const { t } = useI18n();

/* 分页事件触发 */
const onChange = (page: number, pageSize: number) => {
  query.value.pageNum = page;
  query.value.pageSize = pageSize;
  list();
};

const onCheck = (id: string) => {
  if (table.value.keys.includes(id)) {
    table.value.keys = table.value.keys.filter(e => e !== id);
  } else {
    table.value.keys.push(id);
  }
};
</script>

<style lang="scss" scoped></style>
